<template>
  <view class="container">
    <!-- 疾病类型选择 -->
    <view class="disease-type-section">
      <van-cell title="选择疾病类型" :border="false" />
      <van-radio-group v-model="selectedDiseaseType">
        <van-cell-group>
          <van-cell
            v-for="type in diseaseTypes"
            :key="type.id"
            :title="type.name"
            :label="type.description"
            clickable
            @click="selectedDiseaseType = type.id"
          >
            <template #right-icon>
              <van-radio :name="type.id" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </view>

    <!-- 基本信息 -->
    <view class="basic-info-section">
      <van-cell title="基本信息" :border="false" />
      <van-field
        v-model="recordForm.diagnosisDate"
        label="确诊时间"
        placeholder="请选择确诊时间"
        readonly
        is-link
        @click="showDatePicker = true"
      />
      <van-field
        v-model="recordForm.hospital"
        label="确诊医院"
        placeholder="请输入确诊医院"
      />
      <van-field
        v-model="recordForm.doctor"
        label="主治医生"
        placeholder="请输入主治医生"
      />
      <van-field
        v-model="recordForm.severity"
        label="病情严重程度"
        placeholder="请选择严重程度"
        readonly
        is-link
        @click="showSeverityPicker = true"
      />
    </view>

    <!-- 症状描述 -->
    <view class="symptoms-section">
      <van-cell title="症状描述" :border="false" />
      <van-field
        v-model="recordForm.symptoms"
        label="主要症状"
        type="textarea"
        :autosize="{ minHeight: 100 }"
        placeholder="请详细描述主要症状"
      />
      <van-field
        v-model="recordForm.triggers"
        label="诱发因素"
        type="textarea"
        :autosize="{ minHeight: 80 }"
        placeholder="请描述可能的诱发因素"
      />
    </view>

    <!-- 用药情况 -->
    <view class="medication-section">
      <van-cell title="用药情况" :border="false" />
      <view class="medication-list">
        <view
          v-for="(medication, index) in recordForm.medications"
          :key="index"
          class="medication-item"
        >
          <van-field
            v-model="medication.name"
            label="药品名称"
            placeholder="请输入药品名称"
          />
          <van-field
            v-model="medication.dosage"
            label="用药剂量"
            placeholder="如：1片/次"
          />
          <van-field
            v-model="medication.frequency"
            label="用药频次"
            placeholder="如：一日三次"
          />
          <van-button
            size="small"
            type="danger"
            plain
            @click="removeMedication(index)"
            class="remove-btn"
          >
            删除
          </van-button>
        </view>
      </view>
      <van-button
        type="primary"
        size="small"
        plain
        @click="addMedication"
        class="add-medication-btn"
      >
        + 添加用药
      </van-button>
    </view>

    <!-- 生活方式 -->
    <view class="lifestyle-section">
      <van-cell title="生活方式" :border="false" />
      <van-field
        v-model="recordForm.diet"
        label="饮食习惯"
        type="textarea"
        :autosize="{ minHeight: 80 }"
        placeholder="请描述日常饮食习惯"
      />
      <van-field
        v-model="recordForm.exercise"
        label="运动情况"
        type="textarea"
        :autosize="{ minHeight: 80 }"
        placeholder="请描述运动频率和强度"
      />
      <van-cell title="是否吸烟" :border="false">
        <template #default>
          <van-switch v-model="recordForm.smoking" />
        </template>
      </van-cell>
      <van-cell title="是否饮酒" :border="false">
        <template #default>
          <van-switch v-model="recordForm.drinking" />
        </template>
      </van-cell>
    </view>

    <!-- 日期选择器 -->
    <van-popup 
      v-model:show="showDatePicker" 
      position="bottom"
      closeable
      @close="showDatePicker = false"
      @click-overlay="showDatePicker = false"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择确诊时间"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>

    <!-- 严重程度选择器 -->
    <van-popup 
      v-model:show="showSeverityPicker" 
      position="bottom"
      closeable
      @close="showSeverityPicker = false"
      @click-overlay="showSeverityPicker = false"
    >
      <van-picker
        :columns="severityOptions"
        @confirm="onSeverityConfirm"
        @cancel="showSeverityPicker = false"
      />
    </van-popup>

    <!-- 底部提交按钮 -->
    <view class="bottom-action">
      <van-button
        type="primary"
        size="large"
        @click="submitRecord"
        :loading="submitting"
      >
        保存建档
      </van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface Medication {
  name: string;
  dosage: string;
  frequency: string;
}

const selectedDiseaseType = ref("");
const showDatePicker = ref(false);
const showSeverityPicker = ref(false);
const currentDate = ref(new Date());
const submitting = ref(false);

const diseaseTypes = [
  {
    id: "hypertension",
    name: "高血压",
    description: "收缩压≥140mmHg或舒张压≥90mmHg"
  },
  {
    id: "diabetes",
    name: "糖尿病",
    description: "空腹血糖≥7.0mmol/L或随机血糖≥11.1mmol/L"
  },
  {
    id: "coronary_heart_disease",
    name: "冠心病",
    description: "冠状动脉粥样硬化性心脏病"
  },
  {
    id: "copd",
    name: "慢阻肺",
    description: "慢性阻塞性肺疾病"
  }
];

const severityOptions = ["轻度", "中度", "重度"];

const recordForm = reactive({
  diagnosisDate: "",
  hospital: "",
  doctor: "",
  severity: "",
  symptoms: "",
  triggers: "",
  medications: [
    { name: "", dosage: "", frequency: "" }
  ] as Medication[],
  diet: "",
  exercise: "",
  smoking: false,
  drinking: false
});

const addMedication = () => {
  recordForm.medications.push({
    name: "",
    dosage: "",
    frequency: ""
  });
};

const removeMedication = (index: number) => {
  if (recordForm.medications.length > 1) {
    recordForm.medications.splice(index, 1);
  }
};

const onDateConfirm = () => {
  recordForm.diagnosisDate = currentDate.value.toISOString().split('T')[0];
  showDatePicker.value = false;
};

const onSeverityConfirm = (value: any) => {
  recordForm.severity = value.selectedOptions[0]?.text || "";
  showSeverityPicker.value = false;
};

const validateForm = () => {
  if (!selectedDiseaseType.value) {
    uni.showToast({ title: "请选择疾病类型", icon: "none" });
    return false;
  }
  if (!recordForm.diagnosisDate) {
    uni.showToast({ title: "请选择确诊时间", icon: "none" });
    return false;
  }
  if (!recordForm.hospital) {
    uni.showToast({ title: "请输入确诊医院", icon: "none" });
    return false;
  }
  if (!recordForm.symptoms) {
    uni.showToast({ title: "请描述主要症状", icon: "none" });
    return false;
  }
  return true;
};

const submitRecord = () => {
  if (!validateForm()) {
    return;
  }

  submitting.value = true;

  setTimeout(() => {
    submitting.value = false;
    uni.showModal({
      title: "建档成功",
      content: "慢病档案已成功建立",
      showCancel: false,
      success: () => {
        uni.navigateBack();
      }
    });
  }, 2000);
};

onLoad(() => {
  console.log("慢病建档页面 onLoad");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.disease-type-section,
.basic-info-section,
.symptoms-section,
.medication-section,
.lifestyle-section {
  background: white;
  margin-bottom: 16rpx;
}

.medication-list {
  padding: 0 32rpx;
}

.medication-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #eee;
  position: relative;
  
  &:last-child {
    border-bottom: none;
  }
}

.remove-btn {
  position: absolute;
  top: 24rpx;
  right: 0;
}

.add-medication-btn {
  margin: 24rpx 32rpx;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: white;
  z-index: 100;
}
</style>